<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <!--公用头部-->
    <th:block th:replace="common/head::commonHead(背景-小邑)"/>
    <style>
    </style>
</head>
<!--公用js-->
<th:block th:replace="common/head::commonJs"/>
<body marginwidth="0" marginheight="0">
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="" id="genForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">关键词</label>
                        <div class="layui-input-inline">
                            <input id="keywords" name="keywords" class="layui-input" autocomplete="off"
                                   type="text" placeholder="请输入关键词"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button" id="searchBtn"
                                class="xy-btn xy-btn-primary icon-btn xy-btn-md">
                            <i class="layui-icon">&#xe615;</i> 搜索
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="treeTable"></table>
        </div>
    </div>
</div>
<!--表格工具-->
<script type="text/html" id="treeTable-toolbar">
    <button sec:authorize="hasPermission('/auth/addAuth','auth:addAuth')"
            class="xy-btn xy-btn-primary icon-btn xy-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i> 新增
    </button>
    <button plain class="xy-btn xy-btn-primary icon-btn xy-btn-md" lay-event="btnExpandAll">
        <i class="layui-icon layui-icon-spread-left"></i> 展开
    </button>
    <button plain class="xy-btn xy-btn-primary icon-btn xy-btn-md" lay-event="btnFoldAll">
        <i class="layui-icon layui-icon-shrink-right"></i> 折叠
    </button>
</script>
<!-- 表格操作列 -->
<script type="text/html" id="tbBar">
    <a sec:authorize="hasPermission('/auth/editAuth','auth:editAuth')" class="xy-btn xy-btn-xs" lay-event="edit">修改</a>
    <a sec:authorize="hasPermission('/auth/delete','auth:delete')" class="xy-btn xy-btn-danger xy-btn-xs"
       lay-event="del">删除</a>
</script>
<!--单元格-->
<!--<script type="text/html" id="auth-enable">-->
<!--    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="auth-enable" {{d.status=='0'?'checked':'' }}>-->
<!--</script>-->

<script>
    var insTb;
    layui.use(['layer', 'util', 'treeTable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var treeTable = layui.treeTable;
        util.fixbar({
            top: true //返回顶部
            , css: {right: 50, bottom: 50}
            , bgcolor: '#3b7cd8'
            , click: function (type) {

            }
        });
        // 渲染表格
        insTb = treeTable.render({
            elem: '#treeTable',
            url: basePath + '/auth/list?isDelete=0',
            toolbar: '#treeTable-toolbar',
            height: 'full',
            cellMinWidth: 100,
            skin: 'line',
            tree: {
                iconIndex: 1,
                isPidData: true,
                idName: 'id',
                pidName: 'parentId'
            },
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports'],
            cols: [
                [
                    {type: 'numbers'},
                    // {type: 'checkbox'},
                    {field: 'authName', title: '权限名称'},
                    {
                        field: 'icon',
                        width: 120,
                        title: '菜单图标',
                        align: 'center',
                        templet: '<p><i class="fa {{d.icon}}"></i></p>'
                    },
                    {field: 'menuUrl', title: '菜单Url', align: 'center'},
                    {field: 'authCode', title: '权限标识', align: 'center'},
                    {field: 'sort', title: '排序', align: 'center'},
                    // {field: 'status', title: '状态', align: 'center',templet: '#auth-enable'},
                    {
                        field: 'type', title: '类型', align: 'center', width: 60, templet: function (d) {
                            if (d.type == 0) {
                                return "<span plain class='xy-btn xy-btn-primary xy-btn-sm'>目录</span>"
                            } else if (d.type == 1) {
                                return "<span plain class='xy-btn xy-btn-success xy-btn-sm'>菜单</span>"
                            } else if (d.type == 2) {
                                return "<span  class='xy-btn  xy-btn-sm'>按钮</span>"
                            }
                        }
                    },
                    {
                        title: '创建时间', align: 'center', templet: function (d) {
                            return util.toDateString(d.createTime);
                        }
                    },
                    {align: 'center', toolbar: '#tbBar', title: '操作', width: 120}
                ]
            ],
        });

        // 工具列点击事件
        treeTable.on('tool(treeTable)', function (obj) {
            var event = obj.event;
            if (event === 'del') {
                layer.confirm('确定要删除吗？', {icon: 5, title: '提示', skin: 'layer-ext-myskin'}, function (index) {
                    layer.close(index);
                    var loadIndex = null;
                    sendAjaxPostToCallback(
                        basePath + '/auth/delete1',
                        {id: obj.data.id},
                        function (data) {
                            if (data.success) {
                                // 提示信息
                                top.layui.notice.msg(data.msg ,{icon: 1,position:"topCenter"});
                                insTb.refresh();
                            } else {
                                top.layui.notice.msg(data.msg ,{icon: 2,position:"topCenter"});
                            }
                        },
                        function (data) {
                            if (utils.string.isEmpty(data) && utils.string.isEmpty(data.msg)){
                                top.layui.notice.msg(data.msg ,{icon: 2,position:"topCenter"});
                            }else{
                                top.layui.notice.msg("服务器内部错误，请联系管理员~", {icon: 2});
                            }
                        },
                        function () {
                            loadIndex = layer.load(1);
                        },
                        function () {
                            layer.close(loadIndex);
                        },
                    )

                });
            } else if (event === 'edit') {
                layer.open({
                    type: 2,
                    id: "update_menu",
                    skin: 'layer-ext-myskin',
                    title: "修改菜单",
                    shadeClose: false,
                    shade: 0.3,
                    area: ["60%", "56.1%"],
                    content: basePath + '/view/system/menu/menu_add_update?type=2&id=' + obj.data.id + "&parentId=" + obj.data.parentId + "&icon=" + obj.data.icon
                });
            }
        });

        // 头部工具栏点击事件
        treeTable.on('toolbar(treeTable)', function (obj) {
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 2,
                        id: "add_menu",
                        skin: 'layer-ext-myskin',
                        title: "添加菜单",
                        shadeClose: false,
                        shade: 0.3,
                        area: ["60%", "56.1%"],
                        content: basePath + '/view/system/menu/menu_add_update?type=1'
                    });
                    break;
                case 'btnExpandAll':
                    insTb.expandAll();// 全部展开
                    break;
                case 'btnFoldAll':
                    insTb.foldAll();// 全部折叠
                    break;
                case 'refresh'://刷新
                    insTb.refresh();
                    break;
            }
        });
    });
    // 搜索
    $('#searchBtn').click(function () {
        var keywords = $('#keywords').val();
        if (keywords) {
            insTb.filterData(keywords);
        } else {
            insTb.clearFilter();
        }
    });
</script>
</body>
</html>